<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>成绩查询</title>
  <link rel="stylesheet" href="../assets/vant.css" />
  <script src="../assets/vue-2.6.14.min.js"></script>
  <script src="../assets/vant.min.js"></script>
  <style>
    #app {
      background: #F0F1F0;
      height: 100vh;
    }
    .van-nav-bar .van-icon {
      color: #333;
    }
    .van-cell--large {
      padding-top: 24px;
      padding-bottom: 24px;
    }
    .btn-box {
      padding: 0 5%;
      margin-top: 100px;
    }
    .search-result {
      display: flex;
      justify-content: center;
      margin-top: 20vh;
    }
  </style>
</head>

<body>
  <div id="app">
    <van-nav-bar title="成绩查询" left-arrow @click-left="goBack"></van-nav-bar>
    <div class="search-result" v-if="hasResult">
      <van-image src="../assets/icons/no_result.png" width="70%"></van-image>
    </div>
    <div class="content" v-else>
      <van-image src="../assets/icons/search_score.png" width="100%" height="120"></van-image>
      <van-cell-group>
        <van-field size="large" v-model="idNum" label="考生证件号码" placeholder="请输入证件号"></van-field>
        <van-field size="large" v-model="admissionTicketNum" label="考生准考证号" placeholder="请输入准考证"></van-field>
      </van-cell-group>
      <div class="btn-box">
        <van-button block round color="#fa4955" @click="handleSearch">立即查询</van-button>
      </div>
    </div>
  </div>
</body>
<script>
  new Vue({
    el: '#app',
    data () {
      return {
        idNum: '',
        admissionTicketNum: '',
        hasResult: false
      }
    },
    methods: {
      goBack() {
        window.history.back()
      },
      handleSearch() {
        this.hasResult = true;
      }
    }
  });
</script>
</html>